<template>
  <div>
    <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">渠道任务跟进</el-breadcrumb-item>
        <el-breadcrumb-item>{{ id?'编辑':'新增' }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
        <!-- <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">提交</el-button> -->
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <div v-loading="dataLoading">

      <div class="qup-title-box"><span class="border" /><span>任务基本信息</span></div>
      <el-form
        ref="refForm"
        style="margin-top:20px"
        :rules="formRules1"
        :model="formData1"
        size="mini"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="办事处:" prop="officeCode">
              <input-with-dialog
                v-model="office"
                :props="{label:'name',value:'code'}"
                :config="dialogConfigOffice"
                @change="handleChangeOffice"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户经理:" prop="customerManagerName">
              <input-with-dialog
                v-model="client"
                :props="{label:'userName',value:'account'}"
                :config="dialogConfigClient"
                @change="handleChangeClient"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式:" prop="customerManagerPhone">
              <el-input v-model="formData1.customerManagerPhone" placeholder="请选择客户经理" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否延续上月市场:" prop="isContinueLastMonthMarket">
              <el-radio-group v-model="formData1.isContinueLastMonthMarket">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="责任市场:" prop="dutyMarket">
              <select-dlg
                v-if="showDlgData"
                ref="formDlg"
                :visible.sync="showDlgData"
                :config="dialogConfigCustomer"
                @change="handleChangeCustomer"
              />

              <el-input v-model="formData1.dutyMarket" clearable placeholder="请输入责任市场">
                <el-button slot="append" icon="el-icon-search" @click="openDlg" />
              </el-input>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="门店:" prop="shopCode">
              <input-with-dialog
                v-if="formData1.shopCode"
                v-model="shop"
                :props="{label:'name',value:'code'}"
                :config="dialogConfigShop"
                @change="handleChangeShop"
              />
            <!-- <el-input v-model="formData1.shopCode" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="门店名称:" prop="shopName">
            <el-input v-model="formData1.shopName" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报图类型:" prop="reportPicType">
              <el-select
                v-model="formData1.reportPicType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in reportPicZone"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务类型:" prop="taskType">
              <el-select
                v-model="formData1.taskType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in taskTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务来源说明:" prop="taskSourceDesc">
              <el-input v-model="formData1.taskSourceDesc" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="formData1.id" class="qup-title-box"><span class="border" /><span>客户经理每日填报</span></div>
      <el-form
        v-if="formData1.id"
        ref="refForm"
        style="margin-top:20px"
        :rules="formRules2"
        :model="formData2"
        size="mini"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item :rules="[{ required: formData1.id, message: '请选择', trigger: 'change' }]" label="当前是否有进展:" prop="isHaveProgress">
              <el-radio-group v-model="formData2.isHaveProgress">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :rules="[{ required: formData1.id, message: '请选择', trigger: 'change' }]" label="整体进度:" prop="schedule">
              <el-select
                v-model="formData2.schedule"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in scheduleList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
    <el-button size="mini" type="primary" @click="handleEdit">编辑</el-button> -->
      <el-table
        v-if="formData1.id"
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        show-overflow-tooltip
        border
        style="width: 100%;margin:10px 0"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" fixed width="50" label="序号" />
        <el-table-column show-overflow-tooltip prop="fillTime" fixed label="日期" />
        <el-table-column show-overflow-tooltip prop="isHaveProgress" width="100" label="是否有进展">
          <template slot-scope="scope">{{ scope.row.isHaveProgress===1?'是':'否' }}</template>
        </el-table-column>
        <el-table-column width="100" show-overflow-tooltip prop="haveIntentionDealer" label="有无意向商家">
          <template slot-scope="scope">{{ scope.row.haveIntentionDealer===1?'有':'无' }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="negotiationSituationDetailed" label="洽谈情况详细描述" />
        <el-table-column show-overflow-tooltip prop="planSurveyTime" label="计划测绘日期" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="计划报图日期" />
      </el-table>
      <div class="qup-title-box"><span class="border" /><span>档案科填写资料</span></div>
      <el-form
        ref="refForm"
        style="margin-top:20px"
        :rules="formRules3"
        :model="formData3"
        size="mini"
        label-width="130px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item :rules="[{ required: formData1.id, message: '请选择', trigger: 'change' }]" label="是否完成分解任务:" prop="isFinishResolve">
              <el-radio-group v-model="formData3.isFinishResolve">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本月实际测绘数:" prop="thisMonthActualSurveyTime">
              <el-input v-model.number="formData3.thisMonthActualSurveyTime" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本月测绘项目号:" prop="thisMonthSurveyConstCode">
              <el-input v-model="formData3.thisMonthSurveyConstCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="实际测绘与任务市场是否一致:" :rules="[{ required: formData1.id, message: '请选择', trigger: 'change' }]" prop="isSurveyAndMarketConsisten">
              <el-radio-group v-model="formData3.isSurveyAndMarketConsisten">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否核算本月任务:" :rules="[{ required: formData1.id, message: '请选择', trigger: 'change' }]" prop="isAccountingThisMonth">
              <el-radio-group v-model="formData3.isAccountingThisMonth">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="formData3.remark" show-word-limit maxlength="1000" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        show-overflow-tooltip
        border
        style="width: 100%;margin:10px 0"
        :data="constTableData"
      >
        <el-table-column type="index" fixed width="50" label="序号" />
        <el-table-column show-overflow-tooltip prop="fillTime" fixed label="门店建设项目号" />
        <el-table-column show-overflow-tooltip prop="isHaveProgress" label="市场名称" />
        <el-table-column show-overflow-tooltip prop="haveIntentionDealer" label="门店编码" />
        <el-table-column show-overflow-tooltip prop="negotiationSituationDetailed" label="门店建设整体进度" />
        <el-table-column show-overflow-tooltip prop="planSurveyTime" label="所属阶段" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="测绘时间" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="报图时间" />
        <el-table-column show-overflow-tooltip prop="planReportPicTime" label="创建时间" />
      </el-table>
      <div style="color:#888;text-align:center">没有更多了</div>
    </div>
  </div>
</template>
<script>
import SelectDlg from './components/SelectDlg'
import { getDictByPatchType } from '@/api/dataDict'
import { } from '@/api/common.js'
import { queryById, saveData, queryDailyFill } from '@/api/channelTask'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'EditChannelFollow',
  components: { SelectDlg },
  mixins: [BackPageMixin],
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataLoading: false,
      saveLoading: false,
      showDlgData: false,
      tableData: [],
      constTableData: [], // 门店建设
      office: [],
      client: [],
      customer: [],
      shop: [],
      dialogConfigClient: {
        title: '客户经理',
        filtersRaw: [],
        pageFlag: false,
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/domainMarketingUser/page`,
        setting: [{
          prop: 'account',
          title: '编码'
        },
        {
          prop: 'userName',
          title: '名称'
        },
        {
          prop: 'phone',
          title: '电话'
        }]

      },
      dialogConfigCustomer: {
        title: '客户',
        filtersRaw: [],
        pageFlag: false,
        interfacePath: `/select-service/api/v1/customer/page`
        // setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称', phone: '电话' }]
      },
      dialogConfigShop: {
        title: '门店',
        filtersRaw: [],
        pageFlag: false,
        interfacePath: `/select-service/api/v1/shop/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称', phone: '电话' }]
      },
      scheduleList: [],
      reportPicZone: [], // 报图类型
      taskTypeList: [], // 任务类型
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        } },
      formRules1: {
        officeCode: [{ required: true, message: '请选择办事处', trigger: 'change' }],
        customerManagerName: [{ required: true, message: '请选择', trigger: 'change' }],
        isContinueLastMonthMarket: [{ required: true, message: '请选择', trigger: 'change' }],
        dutyMarket: [{ required: true, message: '请填写', trigger: 'change' }],
        reportPicType: [{ required: true, message: '请选择', trigger: 'change' }],
        taskType: [{ required: true, message: '请选择', trigger: 'change' }],
        taskSourceDesc: [{ required: true, message: '请填写', trigger: 'change' }]
      },
      formRules2: {
        isHaveProgress: [{ required: false, message: '请选择', trigger: 'change' }],
        schedule: [{ required: false, message: '请选择', trigger: 'change' }]
      },
      formRules3: {
        // isFinishResolve: [{ required: true, message: '请选择', trigger: 'change' }],
        // isSurveyAndMarketConsisten: [{ required: true, message: '请选择', trigger: 'change' }],
        // isAccountingThisMonth: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      formData1: {
        id: '',
        channelTaskCode: '',
        officeCode: '',
        officeName: '',
        customerManagerName: '',
        customerManagerPhone: '',
        isContinueLastMonthMarket: undefined,
        dutyMarket: '',
        shopCode: '',
        shopName: '',
        reportPicType: '',
        taskType: '',
        taskSourceDesc: ''
      },
      formData2: {
        schedule: '',
        isHaveProgress: undefined
      },
      formData3: {
        isFinishResolve: undefined,
        thisMonthActualSurveyTime: '',
        thisMonthSurveyConstCode: '',
        isSurveyAndMarketConsisten: undefined,
        isAccountingThisMonth: undefined,
        remark: ''
      },
      dialogConfigOffice: {
        title: '办事处',
        interfacePath: `/select-service/api/v1/organization/page`,
        filtersRaw: [{ 'id': 'name', 'property': 'name', 'value': '销售公司直营部', 'operator': '<>' }, { 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }, { 'id': 'status', 'property': 'status', 'value': '1', 'operator': '=' }],
        setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
      },
      formData: {

      }

    }
  },
  watch: {
  },
  async created() {
    if (this.id) {
      this.dataLoading = true
      await queryById(this.id).then(res => {
        if (res.success === 1) {
          this.channelTaskCode = res.data.channelTaskCode
          // 获取详情数据
          const { id, channelTaskCode, officeCode, taskSourceDesc, officeName, customerManagerName, customerManagerPhone, isContinueLastMonthMarket, dutyMarket, shopCode, shopName, reportPicType, taskType } = res.data
          this.formData1 = { id, channelTaskCode, officeCode, taskSourceDesc, officeName, customerManagerName, customerManagerPhone, isContinueLastMonthMarket, dutyMarket, shopCode, shopName, reportPicType, taskType }
          this.office = [{ code: this.formData1.officeCode, name: this.formData1.officeName }]
          this.client = [{ userName: this.formData1.customerManagerName, account: this.formData1.customerManagerCode }]
          this.customer = [{ name: this.formData1.dutyMarket, code: this.formData1.dutyMarket }]
          this.shop = [{ name: this.formData1.shopName, code: this.formData1.shopCode }]

          const { schedule, isHaveProgress } = res.data
          this.formData2 = { schedule, isHaveProgress }
          const { isFinishResolve, thisMonthActualSurveyTime, thisMonthSurveyConstCode, isSurveyAndMarketConsisten, isAccountingThisMonth, remark } = res.data
          this.formData3 = { isFinishResolve, thisMonthActualSurveyTime, thisMonthSurveyConstCode, isSurveyAndMarketConsisten, isAccountingThisMonth, remark }
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })
      if (this.channelTaskCode) {
        await queryDailyFill(this.channelTaskCode).then(res => {
          if (res.success) this.tableData = res.data.records
        })
      }
    }
    this.getDictByPatchTypeAll()
  },
  methods: {
    openDlg() {
      this.showDlgData = true
    },
    handleSelectionChange(data) {

    },
    handleAdd() {
      this.tableData.unshift({})
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          saveData({ ...this.formData1, ...this.formData2, ...this.formData3 }).then(res => {
            if (res.success === 1) {
              this.$message({
                message: this.formData.id ? '编辑成功' : '新增成功',
                type: 'success'
              })
              this.goBack()
              const isNew = !this.formData.id // 是否新增数据 true (新增则刷新列表到第一页)/ false (非新增则刷新当前页)
              this.$emit('success', isNew)
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    },
    async getDictByPatchTypeAll() {
      const { OVERALL_PROGRESS, REPORT_TYPE, CHANNEL_TASK_TYPE } =
       await getDictByPatchType(['OVERALL_PROGRESS', 'REPORT_TYPE', 'CHANNEL_TASK_TYPE'])
      this.scheduleList = OVERALL_PROGRESS
      this.reportPicZone = REPORT_TYPE
      this.taskTypeList = CHANNEL_TASK_TYPE
    },
    // 监听办事处数据变化
    handleChangeOffice(data) {
      if (data.length !== 0) {
        this.$set(this.formData1, 'officeCode', data[0].code)
        this.$set(this.formData1, 'officeName', data[0].name)
        this.$refs.refForm.validateField('officeCode')
      } else {
        this.$set(this.formData1, 'officeCode', '')
        this.$set(this.formData1, 'officeName', '')
      }
    },
    // 客户经理改变
    handleChangeClient(data) {
      if (data.length !== 0) {
        this.formData1.customerManagerName = data[0].userName
        this.formData1.customerManagerCode = data[0].account
        this.formData1.customerManagerPhone = data[0].phone
      } else {
        this.formData1.customerManagerName = ''
        this.formData1.customerManagerCode = ''
        this.formData1.customerManagerPhone = ''
      }
    },
    handleInput(data) {
      console.log(this.customer, data, this.formData1.dutyMarket)
      this.formData1.dutyMarket = data[0].name
    },
    handleChangeCustomer(data) {
      if (data.length !== 0) {
        this.formData1.dutyMarket = data[0].name
      } else {
        this.formData1.dutyMarket = ''
      }
    },
    handleChangeShop(data) {
      if (data.length !== 0) {
        this.formData1.shopCode = data[0].code
        this.formData1.shopName = data[0].name
      } else {
        this.formData1.shopCode = ''
        this.formData1.shopName = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }

</style>
